<template>
	<view class="my-store-info">
		<!-- <u-gap height="44"></u-gap>
		<view class="head">
			<view class="back" @tap="back"><u-icon name="arrow-left" color="#909399" size="28"></u-icon></view>
			<view class="title">终端设置</view>
			<view class="right" @tap="addSet"><u-icon name="plus-circle" color="#909399" size="28"></u-icon></view>
		</view> -->
		<view class="addset" @tap="addSet">新增设备</view>
		<view class="store-form" v-for="(item,index) in terminalList" :key="index">
			<u-cell-group :border="false">
				<u-cell title="终端编号:" :border="true">
					<view class="label" slot="value">{{item.terminalId}}</view>
				</u-cell>
				<u-cell title="高级喇叭" arrow-direction="right" :isLink="true" @click="openShow(1,item)" :border="true">
					<view class="text" slot="value"></view>
				</u-cell>
				<!-- <u-cell title="台卡" @click="openShow(2,item)" :border="true">
					<view class="text" slot="value">{{isbindTaika}}</view>
				</u-cell> -->
				<u-cell title="附加台卡" arrow-direction="right" :isLink="true" @click="openShow(3,item)" :border="true">
					<view class="text" slot="value">{{fujiaTaika}}</view>
				</u-cell>
				<u-cell title="支付盒子" arrow-direction="right" :isLink="true" @click="openShow(4,item)" :border="true">
					<view class="text" slot="value"></view>
				</u-cell>
				<u-cell title="收银机" arrow-direction="right" :isLink="true" @click="openShow(5,item)" :border="false">
					<view class="text" slot="value">未绑定</view>
				</u-cell>
			</u-cell-group>
		</view>


		<u-popup :show="showFour" mode="center" :round="10" :closeOnClickOverlay="true" @close="closeFour">
			<view class="show-box-two">
				<view class="title">请将二维码对准支付盒子</view>
				<view class="code-box">
					<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
				</view>
				<view class="tip">提示：设备流水累计达标一个设备后再累计其他设备，不会同时累计多个设备</view>
				<view class="unbind-btn" @click="unbindBox">解绑</view>
			</view>
		</u-popup>
		<u-modal :show="showModel" @confirm="confirm" @cancel="cancel" ref="uModal" :content='content'
			:showCancelButton="true"></u-modal>

	</view>
</template>

<script>
	const app = getApp();
	const globalData = app.globalData;
	const apiUrl = globalData.wxApi;
	const wxImg = globalData.wxImg;
	import {
		getStoreData,
		dealNum,
		httpPost,
		httpGet,
		bdMapToTxMap,
		txMapToBdMap,
	} from "@/utils/http.js";
	import mpMixin from "@/uni_modules/uview-ui/libs/mixin/mpMixin";
	import uQRCode from '@/common/uqrcode.js'
	const pic1 = require(`@/img/my/my1.png`);
	export default {
		data() {
			return {
				wxImg,
				apiUrl,
				dealNum,
				pic1,
				value: "",
				userInfo: {},
				indexList: [],
				storeId: "",
				showOne: false,
				showFour: false,
				terminalList: [],
				terminalInfo: {},
				deviceName: "",
				isbindTaika: "扫码绑定",
				fujiaTaika: "扫码绑定",
				// 二维码标识串
				qrcodeText: 'eoruw20230528',
				// 二维码尺寸
				qrcodeSize: 198,
				// 最终生成的二维码图片
				qrcodeSrc: '',
				dto: {
					deviceKey: "",
					deviceName: "",
					deviceSecret: "",
					storeName: ""
				},
				showModel: false,
				content: "确定要解绑盒子机吗？"


			};
		},

		onShow() {

		},
		onUnload() {

		},
		onLoad(options) {
			this.storeId = options.storeId;
			this.getTerminalList();
			console.log(uQRCode)
		},
		methods: {
			getTerminalList() {
				const _this = this;
				httpGet(`/api/sellerstoreotherapply/terminalList`).then((res) => {
					_this.terminalList = res.data || [];
				});
			},
			back() {
				uni.navigateBack();
			},
			addSet() {
				const _this = this;
				httpGet(`/api/sellerstoreotherapply/createTerminal/${this.storeId}`).then((res) => {
					_this.getTerminalList();
				});
			},
			openShow(val, data) {
				let _this = this;
				this.terminalInfo = data;
				console.log(666, data, this.terminalInfo);
				if (val == 1) { //喇叭
					uni.navigateTo({
						url: "/pages/storeManage/hornList?terminalInfo=" + JSON.stringify(_this.terminalInfo)
					});
				}
				if (val == 2) { //绑定台卡
					uni.scanCode({
						success: function(res) {
							console.log('条码类型：' + res.scanType);
							console.log('条码内容：' + res.result);
							let str = res.result;
							//let index = str.indexOf("outpay/");
							let code = str.replace(/[^0-9]/ig, "");
							httpPost(`/api/sellerstoreotherapply/bindTerminal`, {
								qrCode: Number(code),
								subStoreId: _this.terminalInfo.subStoreId,
								terminalId: _this.terminalInfo.terminalId,
								storeId: _this.terminalInfo.storeId
							}).then((res) => {
								_this.isbindTaika = "已绑定";
							});

						}
					});
				}
				if (val == 3) { //附加台卡
					uni.navigateTo({
						url: "/pages/storeManage/deccaSet?terminalInfo=" + JSON.stringify(_this.terminalInfo) +
							"&storeId=" + this.storeId
					});
					// uni.scanCode({
					// 	success: function(res) {
					// 		console.log('条码类型：' + res.scanType);
					// 		console.log('条码内容：' + res.result);
					// 		  let str =res.result;
					// 		  let index = str.indexOf("outpay/");
					// 		  let code=str.substring(index + 7);
					// 		  console.log(code);

					// 		httpPost(`/api/sellerstoreotherapply/bindAdditionalTerminal`, {
					// 			qrCode: Number(code),
					// 			subStoreId: _this.terminalInfo.subStoreId,
					// 			terminalId: _this.terminalInfo.terminalId,
					// 			storeId: _this.terminalInfo.storeId
					// 		}).then((res) => {
					// 			_this.isbindTaika = "已绑定";
					// 		});
					// 	}
					// });
				}
				if (val == 4) { //支付盒子
					uni.showLoading({
						title: '二维码生成中',
						mask: true
					})
					httpGet(`/api/iotdevice/getBoxInfo/${this.terminalInfo.terminalId}`).then((res) => {

						if (res.data && res.data.dto) {
							_this.dto = res.data.dto;
							_this.getCode(res.data.dto)
						}

					});
					this.showFour = true;

				}

			},
			getCode(data) {
				let codeStr = JSON.stringify(data);
				uQRCode.make({
					canvasId: 'qrcode',
					text: codeStr,
					size: this.qrcodeSize,
					margin: 10,
					success: res => {
						this.qrcodeSrc = res
						console.log('qrcodeSrc = ' + this.qrcodeSrc);
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},

			closeFour() {
				this.showFour = false;
			},
			confirm() {
				let _this = this;
				httpGet(`/api/iotdevice/unbindBox/` + this.terminalInfo.terminalId).then((res) => {
					if (res.code == 0) {
						uni.$u.toast("解绑成功");
						_this.showModel = false;
					}
				});
			},
			cancel() {
				this.showModel = false;
			},
			unbindBox() {
				this.showFour=false;
				this.showModel = true;
			}


		},
	};
</script>

<style lang="scss">
	.my-store-info {
		background-color: #f4f5f7;
		height: calc(100vh - 20rpx);
		padding-top: 20rpx;
	}

	.head {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #fff;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;

		.title {
			font-size: 32rpx;
			font-weight: 700;
		}
	}

	.store-form {
		background-color: #fff;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.show-box {
		width: 540rpx;
		padding: 30rpx;

		.title {
			font-size: 36rpx;
			text-align: center;
			font-weight: 600;
		}

		.tip {
			font-size: 24rpx;
			color: #AAAAAA;
			margin-top: 10rpx;
			margin-bottom: 20rpx;
		}

		.input-box {
			margin-top: 20rpx;
		}

		.sure {
			width: 200rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border-radius: 70rpx;
			background: linear-gradient(to right, #37AFFA, #74D6FF);
			color: #fff;
			margin-left: 170rpx;
			margin-top: 40rpx;
		}
	}

	.show-box-two {
		width: 570rpx;
		padding: 40rpx;
		border-radius: 10rpx;

		.code-box {
			width: 400rpx;
			height: 400rpx;
			border: 2rpx solid #f4f5f7;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			margin-left: 85rpx;
		}

		.tip {
			font-size: 24rpx;
			color: #AAAAAA;
		}

		.title {
			text-align: center;
		}
	}

	.addset {
		width: 690rpx;
		margin-left: 30rpx;
		background-color: #37AFFA;
		color: #fff;
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 10rpx;
	}
	.unbind-btn{
		height: 70rpx;
		line-height: 70rpx;
		background-color: #ff3d55;
		text-align: center;
		color: #fff;
		margin-top: 40rpx;
		border-radius: 10rpx;
	}
</style>